import { useState } from 'react'

// todo数据结构
// {
//   id: number,  // 唯一标识
//   text: string, // 代办内容
//   completed: boolean // 是否已完成
// }

// 浏览器存储 localStorage会将数据存储在电脑的硬盘中

function TodoList(props) {
    // 初始化的值就是localStorage中的数据
    const [todos, setTodos] = useState([{
        id: 1,
        text: '学习React',
        completed: false
    },
    {
        id: 2,
        text: '学习Vue',
        completed: false
    }])

    const [text, setText] = useState('')
    // 添加
    const add = () => {
        const todo = {
            id: new Date().getTime(),  // 唯一标识
            text: text, // 代办内容
            completed: false // 是否已完成
        }
        // ... 代表数组结构，将数组内的所有项展开
        setTodos([...todos, todo])
        // 更新一下localstorage
    }
    // 删除
    const deleteItem = (id) => {
        // array.filter  返回一个新的数组，接收一个参数，参数是回调函数，回调函数中 返回true代表被保留，返回false代表被移除（过滤）
        const newTodos = todos.filter(item => {
            return item.id !== id  // id不等于传入的id的项被保留
        })
        setTodos(newTodos)
        // 更新一下localstorage
    }
    // 修改
    const changeCheck = (id) => {
        const newTodos = todos.map(item => {
            if (item.id === id) {
                item.completed = !item.completed
            }
            return item
        })
        setTodos(newTodos)
        // 更新一下localstorage
    }

    return <>
        <div className="top">
            <input type="text" value={text} onChange={(e) => setText(e.target.value)} />
            <button onClick={add}>添加</button>
        </div>
        <ul className="bottom">
            {
                todos.map((item) => {
                    return <li key={item.id}>
                        <input type="checkbox" checked={item.completed} onChange={() => changeCheck(item.id)} />
                        <span style={{ textDecoration: item.completed ? "line-through" : "none" }}>{item.text}</span>
                        <button onClick={() => deleteItem(item.id)}>删除</button>
                    </li>
                })
            }
        </ul>
    </>
}

export default TodoList;